<template>
  <div id="indextwo" :style="{ width, height }"></div>
</template>

<script>
import { queryActList } from '@/api/collection/board'
import resize from '@/views/dashboard/mixins/resize'

export default {
  name: 'indextwo',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }

  },
  data() {
    return {
      chart: null,
      timer: null
    }
  },
  watch: {},
  created() {
    this.compare()
  },
  mounted() {

    this.$nextTick(() => {
      this.initChart()
    })
    //设置定时器
    this.timer = setInterval(() => {
      this.initChart()
    }, 5000)

  },

  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    compare: function(property, desc) {
      return function(a, b) {
        var value1 = a[property]
        var value2 = b[property]
        if (desc == true) {//升序
          return value1 - value2
        } else {//降序
          return value2 - value1
        }
      }
    },
    initChart() {

      const echarts = this.$echarts
      if (this.chart === null) {
        this.chart = echarts.init(document.getElementById('indextwo'))
      }

      queryActList().then((response) => {
        var Arr = response
        var arrNew = []

        for (var i = 0; i < 6; i++) {
          var _num = Math.floor(Math.random() * Arr.length)
          var mm = Arr[_num]
          Arr.splice(_num, 1)
          arrNew.push(mm)
        }

        let arrsdd = arrNew.sort(this.compare('value', false))

        let cityLists = []
        let cityDatas = []

        for (let index = 0; index < arrsdd.length; index++) {
          const element = arrsdd[index]
          if (element.desc != '1号机宽度') {
            if (element.value > 0) {
              cityLists.push(element.desc)
              let aa = element.value.toFixed(2)
              cityDatas.push(parseFloat(aa))
            }

          }
        }

        var colorList = ['#C467FF', '#2CAF70 ', '#FFA23F', '#625AFF', '#4B8BFF']
        let endPix = ''

        var option = {

          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            bottom: 20,
            right: 10,
            textStyle: {
              color: '#666',
              fontSize: 18
            },
            orient: 'vertical'
          },
          grid: {
            borderWidth: 0,
            top: '8%',
            left: '1%',
            right: '10%',
            bottom: '2%'
          },
          color: '#fff',
          yAxis: [{
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            data: cityLists
          }],
          xAxis: {
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false,
              textStyle: { color: '#fff' }
            }
          },
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '10px',
              itemStyle: {
                normal: {
                  show: true,
                  barBorderRadius: 30,
                  color: (params) => {
                    return colorList[params.dataIndex]
                  }
                },
                emphasis: {
                  shadowBlur: 15,
                  shadowColor: 'rgba(0, 0, 0, 0.1)'
                }
              },
              data: cityDatas,
              animationDuration: 1500,
              label: {
                normal: {
                  color: '#fff',
                  show: true,
                  position: 'right',
                  fontSize: 18,
                  fontStyle: 'italic',
                  formatter: function(para) {
                    return para.data + endPix
                  }
                }
              }
            },
            {
              type: 'bar',
              barGap: '0',
              barWidth: 10,
              animation: false,
              itemStyle: {
                color: 'transparent'
              },
              tooltip: {
                show: false
              },
              label: {
                show: true,
                position: ['0', '-35'],
                fontSize: 20,
                color: '#fff',
                formatter: function(param) {
                  return param.name
                }
              },
              data: cityDatas
            }
          ],
          animationEasing: 'cubicOut'
        }
        this.chart.setOption(option)
      })

    }
  }
}
</script>
